<template>
  <div class="container">
    <div class="menu-list">
      <div v-for="item in menuList" :key="item.path" class="menu-item" @click="getPath(item.path)">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const menuList = [
  {
    path: '/waterfall',
    title: '瀑布流',
  },
]

// 跳转菜单
const getPath = (path: string) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  width: 100vw;
  .menu-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .menu-item {
      width: 15%;
      height: 150px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(
        to right bottom,
        #d16ba5,
        #c777b9,
        #ba83ca,
        #aa8fd8,
        #9a9ae1,
        #8aa7ec,
        #79b3f4,
        #69bff8,
        #52cffe,
        #41dfff,
        #46eefa,
        #5ffbf1
      );
      background-size: 100%;
      color: #fff;
      font-size: 30px;
      font-weight: bold;
      cursor: pointer;
      transition: 1s ease; /* 优化渐变过渡效果 */
      &:hover {
        background-size: 400%;
        box-shadow: 2px 2px 6px 2px #ececec;
      }
    }
  }
}
</style>
